<template>
    <div class="topContainer">
        <div class="top-bars">
            <div class="top-img">
                <!--<img src="../../assets/imgs/logo.png" alt="">-->
            </div>
            <div class="top-link">
                <router-link to="">在线咨询</router-link>
                <router-link to="">操作说明</router-link>
                <router-link to="">站内消息</router-link>
                <router-link to="">浏览器下载</router-link>
            </div>
            <div class="top-customer">
                <div class="user">
                    <i :class="'vip'+vipInfo.level" class="iconfont ss-vip"></i>
                </div>
                <div class="user-info">
                    <el-dropdown style="width: 100%;text-align: center">
                        <div class="right-caret">
                            {{nickName}}
                            <i class="el-icon-caret-right"></i>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <div style="text-align: center" @click="toAccount">个人资料</div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div style="text-align: center" @click="vipRenew" v-if="vipInfo.level<=1">开通会员</div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div style="text-align: center" @click="vipUpdate" v-if="vipInfo.level>1&&vipInfo.level<6">会员升级</div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div style="text-align: center" @click="vipRenew" v-if="vipInfo.level>1">会员续费</div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div style="text-align: center" @click="loginOut">退出</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <modal :width="730" :title="vipModal === 'renew'?vipInfo.level>1?'会员续费':'会员开通':'会员升级'" :visible="vipModal" @close="vipModal=false">
            <vipUpdate :memberInfo="vipInfo" :type="vipModal" :close-modal="()=>{vipModal=false}"></vipUpdate>
        </modal>
        <pay></pay>
    </div>
</template>

<script>
    import vipUpdate from './payment/vipUpdate';
    import pay from './payment/pay';

    export default {
        name: 'topBar',
        components: {
            vipUpdate, pay,
        },
        data() {
            return {
                nickName: '',
                vipModal: false,
                vipInfo: {},
            };
        },
        mounted() {
            let user = JSON.parse(sessionStorage.getItem('account'));
            if (user && user.nickName) {
                this.nickName = user.nickName;
            } else {
                this.$router.push({ name: 'home' });
            }
            this.getMemberInfo();
            this.$bus.$on('refreshMemberInfo', this.getMemberInfo);
        },
        methods: {
            vipRenew() {
                this.vipModal = 'renew';
            },
            vipUpdate() {
                this.vipModal = 'update';
            },
            getMemberInfo() {
                this.$api.get('/member/info', {}, success => {
                    this.vipInfo = success;
                    sessionStorage.setItem('member', JSON.stringify(success));
                }, fal => {
                    this.$message.error(fal);
                });
            },
            loginOut(){
                this.$router.push({name:'home'})
            },
            toAccount(){
                this.$router.push({name:'accountManage'})
            }
        },
    };
</script>

<style scoped lang="scss">
    .topContainer {
        height: 100%;
        .top-bars {
            padding: 0 30px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100%;
            .top-img {
                height: 40px;
                img {
                    height: 100%;
                    display: inline-block;
                }
            }
            .top-link {
                font-size: 14px;
                margin-right: 40px;
                a {
                    margin: 0 5px;
                    padding: 0 5px;
                }
            }
            .top-customer {
                @include flex;
                .user {
                    i {
                        font-size: 25px;
                        margin-right: 5px;
                        transition: all .3s;
                    }
                    .vip1 {
                        color: #333333;
                    }
                    .vip2 {
                        color: #c2e3ee;
                    }
                    .vip3 {
                        color: #ffe24b;
                    }
                    .vip4 {
                        color: #f1d6ff;
                    }
                    .vip5 {
                        color: #ff1c43;
                    }
                }
                .user-info {

                }
            }

        }
    }

    .right-caret {
        cursor: pointer;
        color: #1989FA;
        text-decoration: underline;
        i {
            color: #333333;
            font-size: 18px;
            transition: all .2s;
        }
    }

    .right-caret:hover {
        i {
            color: #1989FA;
            transform: rotate(90deg);
        }
    }
</style>